<template>
    <div class="container">
      <div class="row">
        <div class="child">元素 1</div>
        <div class="child">元素 2</div>
        <div class="child">元素 3</div>
      </div>
      <div class="content">其他内容</div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'FlexLayout',
  }
  </script>
  
  <style scoped>
  .container {
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center; 
    height: 100vh;
  }
  
  .row {
    display: flex;
    justify-content: flex-start;
    width: 100%; 
  }
  
  .child {
    flex: 1; 
    margin: 0 10px; 
    display: flex;
    justify-content: center; 
    align-items: center; 
    height: 50px; 
    background-color: #42b983;
    color: white; 
    border-radius: 5px;
  }

  .content {
    margin-top: 20px;
    padding: 20px;
    background-color: #f3f3f3;
    width: 80%; 
    text-align: center;
  }
  </style>
  